<template>
	<div>
		<el-dialog title="订单提货" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false" append-to-body @close="close">
			<el-form v-if="detail" ref="form" v-loading="loading" size="small" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="订单编号：">{{ detail.orderNo }}</el-form-item>
				<div v-if="detail.delivery">
					<el-form-item label="提货人：">{{ detail.delivery.userName || detail.memberName || detail.customerName }}</el-form-item>
					<el-form-item label="自提时间：">
						<div>{{ detail.delivery.arrivalTime || '无' }}</div>
					</el-form-item>
					<el-form-item label="预留电话：">{{ detail.delivery.phone || '无' }}</el-form-item>
					<el-form-item label="顾客备注：">{{ detail.bizData && detail.bizData.remark ? detail.bizData.remark : '无' }}</el-form-item>
				</div>
				<el-divider />
				<el-form-item label="提货码：" prop="code"><el-input v-model="form.code" placeholder="请输入顾客提供的提货码" size="large" clearable /></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div class="flexCCC">
					<el-button size="large" round type="primary" class="btn-submit" :disabled="loading" @click="submit">订单提货</el-button>
					<el-button size="text" round :disabled="loading" @click="hide">取 消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { orderPickUp } from '@/views/wxaMallModule/api/order';
export default {
	data() {
		return {
			// 校验字段
			rules: {
				code: [
					{
						required: true,
						message: '请输入顾客提供的提货码',
						trigger: ['blur', 'change']
					}
				]
			},
			// 配置
			resolve: null,
			reject: null,
			// 状态
			loading: false,
			dialogVisible: null,
			// 数据
			detail: null,
			form: {
				code: null,
				orderNo: null,
				remark: null
			}
		};
	},
	methods: {
		/**
		 * 弹框相关
		 */
		open({ detail }) {
			this.detail = detail;
			this.show();
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		show() {
			this.dialogVisible = true;
		},

		close() {
			this.form = {
				code: null,
				orderNo: null,
				remark: null
			};
			this.loading = false;
			this.$refs.form.resetFields();
		},

		hide() {
			this.resolve = null;
			this.reject = null;
			this.dialogVisible = false;
		},

		/**
		 * 数据组
		 */

		/**
		 * 按钮组
		 */
		// 确 定
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.form.orderNo = this.detail.orderNo;
					this.form.remark = this.detail.remark;
					this.loading = true;
					orderPickUp(this.form)
						.then(res => {
							this.$notify({
								title: '成功',
								message: '提货成功',
								type: 'success',
								duration: 2000,
								offset: 40
							});
							this.resolve && this.resolve();
							this.hide();
						})
						.catch(err => {})
						.finally(() => {
							this.loading = false;
						});
				}
			});
		}

		/**
		 * 状态组
		 */

		/**
		 * 方法组
		 */
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.w-400 {
	width: 400px;
	display: block;
	margin: 0 auto;
}
.btn-submit {
	margin-bottom: 20px;
}
</style>
